﻿@{
    Layout = null;
}

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>左导航管理</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="~/layuiadmin/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="~/layuiadmin/style/admin.css" media="all">
    <link href="~/css/animate.css" rel="stylesheet" />
    <link href="~/css/font-awesome.min.css" rel="stylesheet" />
</head>
<body>
    <div class="layui-fluid">
        <div class="layui-row layui-col-space15">
            <div class="layui-col-md12">
                <div class="layui-card">
                    <div class="layui-card-header">菜单列表</div>
                    <div class="layui-card-body">
                        <div class="layui-form">
                            <div class="layui-form-item">
                                <span id="btnList">
                                    <button class="layui-btn" data-type="add"><i class="layui-icon layui-icon-add-1"></i>添加一级菜单</button>
                                </span>
                            </div>
                        </div>
                        <table id="tb" lay-filter="tb"></table>
                     @*    <table class="layui-hide" id="ID-treeTable-demo"></table> *@
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script type="text/html" id="tbar">
        {{#if(d.typeId==1){ }}
        <a class="layui-btn layui-btn-xs" lay-event="add" title="添加子菜单"><i class="layui-icon layui-icon-add-1"></i>添加子菜单</a>
        {{#if(d.parentId>0){ }}
        <a class="layui-btn layui-btn-xs" lay-event="addbtn" title="添加按钮"><i class="layui-icon layui-icon-add-circle"></i>添加按钮</a>
        {{#} }}
        <a class="layui-btn layui-btn-xs" lay-event="edit" title="编辑"><i class="layui-icon layui-icon-edit"></i>编辑</a>

        {{#}else if(d.typeId==2){ }}

        <a class="layui-btn layui-btn-xs" lay-event="editbtn" title="编辑"><i class="layui-icon layui-icon-edit"></i>编辑</a>

        {{#} }}
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del" title="删除"><i class="layui-icon layui-icon-delete"></i>删除</a>
    </script>
    <script src="~/layuiadmin/layui/layui.js"></script>
    <script>
        layui.config({
            base: '/layuiadmin/' //静态资源所在路径
        }).use(['element', 'treeGrid', 'layer'], function () {
            var $ = layui.$;
            var layer = layui.layer;
            var form = layui.form;
            var treeGrid = layui.treeGrid;
            form.render();  //查询条件中有select/radio/checkbox时需要调用该方法
          
            treeGrid.render({
                id: 'tb',
                elem: '#tb',
                url: '/Menu/GetMenuList',
                idField: 'id', //必須字段
                treeId: 'id', //树形id字段名称
                treeUpId: 'parentId', //树形父id字段名称
                treeShowName: 'name', //以树形式显示的字段
                //height: h,
                isFilter: false,
                iconOpen: false, //是否显示图标【默认显示】
                isOpenDefault: false, //节点默认是展开还是折叠【默认展开】
                loading: true,
                method: 'post',
                isPage: false,
                cols: [[
                    { type: 'numbers', width: 60, title: '序号' },
                    {
                        field: 'name', title: '功能名称', width: 250
                    },
                    { field: 'url', title: 'Url', align: 'left' },

                    { field: 'btnName', title: '按钮显示', align: 'left', width: 100 },
                    { field: 'btnEnName', title: '按钮标记', align: 'left', width: 100 },
                    {
                        field: 'icon', title: '图标', width: 60, align: 'center', templet: function (d) {
                            return "<i class='" + d.icon + "'></i>";
                        }
                    },
                    { field: 'typeId', title: '类型', width: 100, align: 'center', templet: function (d) { return d.typeId == 1 ? "菜单" : (d.typeId == 2 ? "按钮" : (d.typeId == 3 ? "接口" : "未设定")); } },
                    { field: 'px', title: '顺序', align: 'center', width: 60, edit: 'text' },
                    {
                        field: 'isDel', title: '状态', width: 100,
                        templet: function (d) {
                            return " <input type='checkbox' name='Status' value='" + d.id + "' lay-skin='switch' lay-text='启用|禁用' lay-filter='Status' " + (d.isDel == 1 ? '' : 'checked') + ">";
                        }
                    },
                    {
                        title: '操作', align: 'center', toolbar: '#tbar', width: 350,
                        templet: function (d) { return d.typeId }
                    }
                ]]
            });

            var wd = ['600px', '600px'];
            var winheight = $(window).height();
            if (winheight < 600) {
                wd = ['100%', '100%'];
            }
            var active = {
                add: function () { //添加
                    $.get('/Menu/AddMenu', function (rtnStr) {
                        layer.open({
                            type: 1,
                            title: '添加菜单',
                            area: wd,
                            content: rtnStr,
                            btn: ['保存', '关闭'],
                            success: function (layero, index) {

                            },
                            yes: function (index, layero) {
                                layero.find('#btn-submit-updatePopedom').click();
                                treeGrid.reload('tb');
                            }
                        });
                    })
                }
            };
            //监听工具条
            treeGrid.on('tool(tb)', function (obj) {
                if (obj.event == 'del') { //删除
                    layer.confirm("您确定要删除吗?", { title: '系统提示', icon: 3 }, function (index) {
                        $.post('/Menu/Delete', { menuId: obj.data.id }, function (res) {
                            var data = res;
                            if (data.status == 1) {
                                treeGrid.reload('tb');
                                layer.msg(data.message, function () {

                                }, 500);
                            } else {
                                layer.alert(data.message, { icon: data.state });
                            }
                        });

                    });
                } else if (obj.event == 'edit') {
                    $.get('/Menu/AddMenu', {  menuId: obj.data.id }, function (rtnStr) {
                        layer.open({
                            type: 1,
                            title: '编辑菜单',
                            area: wd,
                            content: rtnStr,
                            btn: ['保存', '关闭'],
                            success: function (layero, index) {

                            },
                            yes: function (index, layero) {
                                layero.find('#btn-submit-updatePopedom').click();
                            }
                        });
                    })
                }
                else if (obj.event == 'add') {
                    $.get('/Menu/AddMenu', {  parentId: obj.data.id }, function (rtnStr) {
                        layer.open({
                            type: 1,
                            title: '添加菜单',
                            area: wd,
                            content: rtnStr,
                            btn: ['保存', '关闭'],
                            success: function (layero, index) {

                            },
                            yes: function (index, layero) {
                                layero.find('#btn-submit-updatePopedom').click();
                            }
                        });
                    })
                } else if (obj.event == 'addbtn') {
                    $.get('/Menu/AddBtn', { parentId: obj.data.id }, function (rtnStr) {
                        console.log(rtnStr)
                        layer.open({
                            type: 1,
                            title: '添加按钮',
                            area: wd,
                            content: rtnStr,
                            btn: ['保存', '关闭'],
                            success: function (layero, index) {

                            },
                            yes: function (index, layero) {
                                layero.find('#btn-submit-updatePopedom').click();
                            }
                        });
                    })
                } else if (obj.event == 'editbtn') {
                    $.get('/Menu/AddBtn', { menuId: obj.data.id }, function (rtnStr) {
                        layer.open({
                            type: 1,
                            title: '编辑按钮',
                            area: wd,
                            content: rtnStr,
                            btn: ['保存', '关闭'],
                            success: function (layero, index) {

                            },
                            yes: function (index, layero) {
                                layero.find('#btn-submit-updatePopedom').click();
                            }
                        });
                    })
                }
            });

            //监听排序
            treeGrid.on('sort(tb)', function (obj) {
                table.reload('tb', {
                    where: {
                        orderField: obj.field,  //排序字段
                        orderBy: obj.type //排序方式
                    }
                });
            });

            //监听状态操作
            form.on('switch(Status)', function (obj) {
                $.post('/Menu/ChangeStatus', { menuId: this.value }, function (res) {
                    var data = res;
                    if (data.state == 1) {
                        layer.msg(data.message);
                    } else {
                        layer.alert(data.message, { icon: data.state });
                    }
                })
            });

            // 修改菜单列表的排序字段
            treeGrid.on('edit(tb)', function (obj) {
                var field = obj.field; // 得到字段
                var value = obj.value; // 得到修改后的值
                var data = obj.data; // 得到所在行所有键值
                if (field === 'px') {
                    $.post('/Menu/ChangePx', { id: data.id, px: data.px }, function (res) {
                        if (res.state == 1) {
                            layer.msg('修改成功', { time: 1000, icon: res.state })
                        } else {
                            layer.msg(res.message);
                        }
                    });
                }
            });
            $('#btnList .layui-btn').on('click', function () {
                var type = $(this).data('type');
                active[type] ? active[type].call(this) : '';
            });
        });

    </script>
</body>
</html>